import React, { useImperativeHandle, useEffect, useState } from 'react';
import { Form, Input, DatePicker } from 'antd';
import TitleLine from 'components/common/titleLine';
import moment from 'moment';
import { connect } from 'dva';
import locale from 'antd/es/date-picker/locale/zh_CN';
import './index.styl';
import { fitterInput } from 'utils/filters'

const { TextArea } = Input;
const { RangePicker } = DatePicker;

function BaseInfo({ detail, cRef, form, id }) {
  const { getFieldDecorator, setFieldsValue, validateFields, getFieldsValue } = form;
  const [len, setLen] = useState(0);
  const disabledDate = current => {
    return current <= moment(new Date(moment(new Date()).format('YYYY/MM/DD')));
  };
  useImperativeHandle(cRef, () => ({
    values: getFieldsValue(),
    validateFields,
  }));
  useEffect(() => {
    if (id) {
      setFieldsValue({
        name: detail && detail.name,
        time: detail && detail.startTime ? [moment(detail.startTime, 'YYYY-MM-DD'), moment(detail.endTime, 'YYYY-MM-DD')] : null,
        remark: detail && detail.remark,
      });
      setLen(detail.strLen || 0)
    }
  }, [detail, id, setFieldsValue]);

  function handleBlur() {
    validateFields(['time'])
  }
  
  return (
    <div className="BaseInfo">
      <TitleLine title={'计划基本信息'} />
      <Form name="nest-messages" className="self-form" labelAlign='right'>
        <div className="flex">
          <Form.Item label="计划名称" colon={false}>
            {getFieldDecorator('name', {
              rules: [
                {
                  required: true,
                  message: '请输入计划名称',
                },
                {
                  max: 20,
                  message: '最多可输入20字',
                }
              ],
              getValueFromEvent: event => event.target.value.replace(fitterInput, ''),
              validateTrigger: ['onBlur', 'onChange']
            })(<Input
              className="self-input"
              placeholder="请输入计划名称"
              maxLength={20}
            />)}
          </Form.Item>
          <Form.Item label="执行时间" colon={false}>
            {getFieldDecorator('time', {
              rules: [{ required: true, message: '请选择执行时间' }],
            })(
              <RangePicker
                locale={locale}
                showToday={false}
                placeholder="请选择"
                format="YYYY-MM-DD"
                disabledDate={disabledDate}
                onBlur={handleBlur}
              />,
            )}
          </Form.Item>
          <Form.Item label="计划描述" className="planDesc" colon={false}>
            {getFieldDecorator('remark', {
              rules: [
                { required: false, message: '请输入' },
                {
                  max: 50,
                  message: '最多可输入50字'
                }
              ],
              getValueFromEvent: event => event.target.value.replace(fitterInput, ''),
              validateTrigger: ['onBlur', 'onChange']
            })(
              <TextArea
                cols={35}
                style={{ height: '1.35rem' }}
                onChange={v => {
                  setLen(v.target.value.replace(/\s/g,"").trim().length);
                }}
                placeholder="请输入计划描述"
                maxLength={50}
              />,
            )}
            <span className="word-tip">{len}/50</span>
          </Form.Item>
        </div>
      </Form>
    </div>
  );
}

export default connect(({ deviceCali }) => ({
  deviceCali,
}))(Form.create()(BaseInfo));

